<template>
  <div>
    <!-- 筛选区域 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="店铺名称：">
        <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" clearable />
      </el-form-item>
      <el-form-item label="买家昵称：">
        <el-input v-model="queryParams.buyerName" placeholder="请输入买家昵称" clearable />
      </el-form-item>
      <el-form-item label="收货人：">
        <el-input v-model="queryParams.receiver" placeholder="请输入收货人姓名" clearable />
      </el-form-item>
      <el-form-item label="配送员：">
        <el-input v-model="queryParams.deliveryMan" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="queryParams.phone" placeholder="请输入任意人手机号" clearable />
      </el-form-item>
      <el-form-item label="创建时间：">
  <el-select v-model="queryParams.createTime" placeholder="全部" style="width: 150px">
    <el-option label="全部" value="" />
    <el-option label="本月内" value="this_month" />
    <el-option label="近三个月" value="last_3_months" />
    <el-option label="今年内" value="this_year" />
    <el-option label="2024年" value="2024" />
    <el-option label="2023年" value="2023" />
    <el-option label="2023年以前" value="before_2023" />
  </el-select>
</el-form-item>
      <el-form-item label="订单状态：">
  <el-select v-model="queryParams.status" placeholder="全部异常状态" style="width: 180px">
    <el-option label="全部异常状态" value="" />
    <el-option label="未到店预警" value="not_arrived_warning" />
    <el-option label="未离店预警" value="not_left_warning" />
    <el-option label="未送达预警" value="not_delivered_warning" />
    <el-option label="超时未到店" value="timeout_not_arrived" />
    <el-option label="超时未送达" value="timeout_not_delivered" />
    <el-option label="待商家退款" value="pending_refund" />
    <el-option label="商家拒绝退款" value="refuse_refund" />
  </el-select>
</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">清除条件</el-button>
      </el-form-item>
    </el-form>
    <!-- 这里是全部订单的内容 -->
    
  </div>

  <div>
    <!-- 表头 -->
    <div class="order-table-header">
      <div class="col col-product">商品</div>
      <div class="col col-receiver">收货人</div>
      <div class="col col-delivery">配送员</div>
      <div class="col col-pay">应付款</div>
      <div class="col col-after-sale">售后</div>
      <div class="col col-status">交易状态</div>
      <div class="col col-action">操作</div>
    </div>

    <!-- 订单列表 -->
    <div v-for="order in pagedOrders" :key="order.id" class="order-block">
      <!-- 订单分组头 -->
      <div class="order-meta">
        <span>订单号：{{ order.orderNo }}</span>
        <span>创建时间：{{ order.createTime }}</span>
        <span>买家：{{ order.buyer }}</span>
        <span>门店：{{ order.shop }}</span>
      </div>
      <!-- 商品行 -->
      <div class="order-row">
        <div class="col col-product">
          <div class="product-info">
            <img :src="order.product.img" class="product-img" />
            <div>
              <div class="product-title">{{ order.product.name }}</div>
              <div class="product-desc">规格：{{ order.product.spec }}　分类：{{ order.product.type }}</div>
              <div>
                <span class="product-price">₽{{ order.product.price }}</span>
                <span class="product-original">(原价:₽{{ order.product.originalPrice }})</span>
              </div>
            </div>
            <div class="product-qty">x{{ order.quantity }}</div>
          </div>
        </div>
        <div class="col col-receiver">
          <div>{{ order.receiver }}</div>
        </div>
        <div class="col col-delivery">
          <div>{{ order.deliveryMan.name }}</div>
          <div>{{ order.deliveryMan.phone }}</div>
        </div>
        <div class="col col-pay">
          <div>₽{{ order.pay }}</div>
          <div class="pay-detail">({{ order.payDetail }})</div>
        </div>
        <div class="col col-after-sale">
          <div>{{ order.afterSale }}</div>
          <div class="after-sale-detail" v-if="order.afterSaleDetail">
            <el-link type="primary" :underline="false">{{ order.afterSaleDetail }}</el-link>
          </div>
        </div>
        <div class="col col-status">
          <div>{{ order.status }}</div>
          <el-tag :type="order.statusTagType" size="small">{{ order.statusTag }}</el-tag>
        </div>
        <div class="col col-action">
          <el-link type="primary" :underline="false" style="margin-right: 8px;">订单详情</el-link>
          <el-link type="primary" :underline="false" style="margin-right: 8px;">订单跟踪</el-link>
          <el-link type="primary" :underline="false">调度跟踪</el-link>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div style="margin: 24px 0; text-align: right;">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 20, 50]"
        :pager-count="5"
        style="display: inline-block;"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const orders = ref([
  {
    id: 1,
    orderNo: '12232964103521',
    createTime: '2022-09-22 18:55:19',
    buyer: '小默123',
    shop: '小飞龙金枕榴莲披萨(凤凰广场店)',
    receiver: '刘吃货',
    deliveryMan: { name: '赵天地', phone: '13612345678' },
    product: {
      img: 'https://img2.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      name: '金枕榴莲薄饼披萨 11',
      price: 285,
      originalPrice: 350,
      spec: '七寸',
      type: '中拼'
    },
    quantity: 1,
    pay: 300,
    payDetail: '含打包:15.00, 配送:30.00, 优惠:-30.00',
    afterSale: '商家拒绝退款',
    afterSaleDetail: '详情',
    status: '配送中',
    statusTag: '超时未送达',
    statusTagType: 'danger'
  },
  {
    id: 2,
    orderNo: '12232964103521',
    createTime: '2022-09-22 18:55:19',
    buyer: '小默123',
    shop: '小飞龙金枕榴莲披萨(凤凰广场店)',
    receiver: '刘吃货',
    deliveryMan: { name: '赵天地', phone: '13612345678' },
    product: {
      img: 'https://img2.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      name: '金枕榴莲薄饼披萨 11',
      price: 285,
      originalPrice: 350,
      spec: '七寸',
      type: '中拼'
    },
    quantity: 1,
    pay: 300,
    payDetail: '含打包:15.00, 配送:30.00, 优惠:-30.00',
    afterSale: '商家拒绝退款',
    afterSaleDetail: '详情',
    status: '配送中',
    statusTag: '超时未送达',
    statusTagType: 'danger'
  },
  // ... 这里可以继续添加更多订单
  // 建议复制上面对象，修改id、买家、配送员、状态等字段
])
const total = computed(() => orders.value.length)
const pageSize = ref(5)
const currentPage = ref(1)

const pagedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return orders.value.slice(start, start + pageSize.value)
})

function handlePageChange(page) {
  currentPage.value = page
}
function handleSizeChange(size) {
  pageSize.value = size
  currentPage.value = 1
}
import { reactive } from 'vue'

const queryParams = reactive({
  orderNo: '',
  productName: '',
  shopName: '',
  buyerName: '',
  receiver: '',
  deliveryMan: '',
  phone: '',
  createTime: '',
  status: ''
})

function handleSearch() {
  // 这里写搜索逻辑
  // console.log(queryParams)
}
function handleReset() {
  Object.keys(queryParams).forEach(key => queryParams[key] = '')
}
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}

.order-table {
  background: #fff;
}
.order-header {
  background: #f7f8fa;
  padding: 8px 16px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 32px;
}
.order-body {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 8px solid #f7f8fa;
}
.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.product-info {
  min-width: 180px;
  margin-right: 16px;
}
.product-qty {
  width: 40px;
  text-align: center;
  margin-right: 16px;
}
.receiver, .delivery-man, .pay, .after-sale, .status, .actions {
  min-width: 120px;
  margin-right: 16px;
}
.original-price {
  color: #aaa;
  text-decoration: line-through;
  font-size: 12px;
  margin-left: 4px;
}
.status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.order-table-header {
  display: flex;
  background: #f7f8fa;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 12px 0 12px 16px;
  margin-bottom: 4px;
}
.col {
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.col-product { flex: 2.5; min-width: 320px; }
.col-receiver,
.col-delivery,
.col-pay,
.col-after-sale,
.col-status,
.col-action { flex: 1; min-width: 120px; }

.order-block {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px #eee;
}
.order-meta {
  background: #f7f8fa;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 32px;
}
.order-row {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.product-info {
  display: flex;
  align-items: center;
}
.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.product-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.product-desc {
  color: #888;
  font-size: 13px;
  margin-bottom: 4px;
}
.product-price {
  color: #333;
  font-weight: bold;
}
.product-original {
  color: #aaa;
  text-decoration: line-through;
  font-size: 12px;
  margin-left: 4px;
}
.product-qty {
  margin-left: 16px;
  color: #666;
}
.pay-detail {
  color: #888;
  font-size: 12px;
}
.after-sale-detail {
  margin-top: 2px;
}
</style>
